<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息显示</title>
    <script src="/js/jquery.js"></script>
    <style>
        td, th {
            width: 100px
        }

        table, div {
            margin: 0 auto;
            width: 800px
        }
    </style>
</head>
<body style="">
<table border="1">
    <tr>
        <th colspan="7">员工信息表</th>
    </tr>
    <tr style="background-color: chartreuse">
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>等级</th>
        <th>部门</th>
        <th>操作</th>
    </tr>
</table>
<table border="1" id="tablepage">

</table>
<div>
    <a href="javascript:void(0)" onclick="clickPage(1)">首页</a>&nbsp;|&nbsp;<a href="javascript:void(0)"
                                                                              onclick="clickPage(2)">上一页</a>&nbsp;|&nbsp;
    <a href="javascript:void(0)" onclick="clickPage(3)">下一页</a>&nbsp;|&nbsp;<a href="javascript:void(0)"
                                                                               onclick="clickPage(4)">尾页</a>
    <span style="float: right">1/3页</span>
</div>
<div><a href="add.html">添加人员</a></div>
</body>
<script>
    let pageIndex = 1;
    let pageSize = 3;
    let pageCountSize = 0;
    $(function () {

        showPage()


        //删除
        $("#tablepage").on("click", ".delete", function () {
            if (confirm("是否删除")) {
                const id = $(this).attr("id")
                // alert(id)
                $.getJSON("/delete", {id: id}, function (data) {
                    alert(data == 1 ? "删除成功" : "删除失败")
                    showPage()
                })
            }

        })


    })

    //分页显示数据
    function showPage() {
        // alert("进入")
        const tbody = $("#tablepage")
        tbody.html("")
        $.getJSON("/show", {index: pageIndex, size: pageSize}, function (data) {

            // console.log(data)

            pageIndex = data.current
            pageCountSize = data.pages
            // console.log("页数:" + pageIndex + "|" + pageSize + "|" + pageCountSize)
            $("span").html(pageIndex + "/" + pageCountSize + "页")
            let styleclass = ""
            $.each(data.records, function (i, e) {
                if (i % 2 != 0) {
                    styleclass = "background-color: chartreuse"
                } else {
                    styleclass = ""
                }
                tbody.append('<tr style="' + styleclass + '">\n' +
                    '        <td>' + e.pid + '</td>\n' +
                    '        <td>' + e.pname + '</td>\n' +
                    '        <td>' + e.sex + '</td>\n' +
                    '        <td>' + e.age + '</td>\n' +
                    '        <td>' + e.rank + '</td>\n' +
                    '        <td>' + e.department + '</td>\n' +
                    '        <td><a href="javascript:void(0)" id="' + e.pid + '" class="delete">删除</a>&nbsp;|&nbsp;<a href="update.html?id='+e.pid+'">修改</a></td>\n' +
                    '    </tr>')
                //    delete(' + e.pid + ')
            })
        })
    }
//翻页
    function clickPage(key) {
        // alert("a")
        if (key == 1) {
            pageIndex = 1;
        }
        if (key == 2) {
            pageIndex--;
        }
        if (key == 3) {
            if (pageIndex < pageCountSize){
                pageIndex++;
            }

        }
        if (key == 4) {
            pageIndex = pageCountSize;
        }
        // console.log("页数:" + pageIndex + "|" + pageSize + "|" + pageCountSize)
        showPage()
    }
</script>
</html>